<template>
	<view class="detail">
		<!-- #ifdef H5 -->
		<view class="head">
			<i class="iconfont icon-zuojiantou" @click="$handleOpenUrl('',2)"></i>
			<view class="span">{{pageStu == 2 ? "采购详情" : "供应详情"}}</view>
			<i class="share" @click="showShare=true"></i>
		</view>
		<!-- #endif -->
		<view class="supplyDetail" v-if="pageStu == 1">
			<view class="img">
				<swiper class="my-swipe" @change="onChange">
					<swiper-item v-for="v in detail.imgArr[0]" :key="v">
						<img :src="v" alt="" class="img" />
					</swiper-item>
				</swiper>
				<view class="custom-indicator">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/img1.png" alt="" />
					<view class="span">{{ current + 1 }}/{{
								detail.imgArr[0].length
							}}</view>
				</view>
				 <!-- #ifdef H5 -->
				<!-- <view class="top">
					<view class="back" @click="$handleOpenUrl('',2)">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/back1.svg" mode=""></image>
					</view>
					<view class="share">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/share.svg" mode="" @click="showShare=true"></image>
					</view>
				</view> -->
				<!-- #endif -->
			</view>
			<view class="supply_main" v-if="pageStu == 1">
				<view class="h1">
					<view class="span">{{ detail.title }}</view>
					<view class="i" :class="detail.goodsType === 0?'active':''">{{ detail.goodsType === 0 ? "现货" : "期货" }}</view>
				</view>
				<view class="main_item">
					<view class="p">销售价格：</view>
					<view class="em" v-if="!userId" @click="$handleOpenUrl('/pages/login/index')">查看详情</view>
					<view class="em" v-if="userId">{{ detail.goodsPrice
		                    }}{{
		                        detail.priceType == 0
		                            ? "元/吨"
		                            : detail.priceType == 1
		                            ? "元/千克"
		                            : detail.priceType == 2
		                            ? "美元/吨"
		                            : detail.priceType == 3
		                            ? "美元/千克"
		                            : ""
		                    }}</view>
				</view>
				<view class="main_item">
					<view class="p">销售数量：</view>
					<view class="b">{{ detail.goodsAmount
		                    }}{{
		                        detail.priceType == 1 || detail.priceType == 3
		                            ? "KG"
		                            : "吨"
		                    }}</view>
				</view>
				<view class="main_item">
					<view class="p">产品产地：</view>
					<view class="b">{{ detail.origin }}</view>
				</view>
				<view class="main_item">
					<view class="p">发货位置：</view>
					<view class="b">{{ detail.provinceName + detail.cityName }}</view>
				</view>
				<view class="main_item">
					<view class="p">供应企业：</view>
					<view class="b">{{ detail.companyName || '' }}</view>
				</view>
			</view>
		</view>

		<view class="demandDetail" v-if="pageStu == 2">
			<view class="supply_main">
				<view class="h1">
					<view class="span">{{ detail.title }}</view>
					<view class="i" :class="detail.goodsType === 0?'active':''">{{ detail.goodsType === 0 ? "现货" : "期货" }}</view>
				</view>
				<view class="main_item">
					<view class="p">意向价格：</view>
					<view class="em" v-if="!userId">查看详情</view>
					<view class="em" v-if="userId">{{ detail.goodsPrice || '面议'
		                    }}{{
		                        detail.goodsPrice ? (detail.priceType == 0
		                            ? "元/吨"
		                            : detail.priceType == 1
		                            ? "元/KG"
		                            : detail.priceType == 2
		                            ? "美元/吨"
		                            : detail.priceType == 3
		                            ? "美元/KG"
		                            : "") : ''
		                    }}</view>
				</view>
				<view class="main_item">
					<view class="p">采购数量：</view>
					<view class="b">{{ detail.goodsAmount}}
						{{ detail.priceType == 1 || detail.priceType == 3
		                            ? "KG"
		                            : "吨"}}
					</view>
				</view>
				<view class="main_item">
					<view class="p">意向产地：</view>
					<view class="b">{{ detail.origin }}</view>
				</view>
				<view class="main_item">
					<view class="p">收货位置：</view>
					<view class="b">{{ detail.provinceName + detail.cityName }}</view>
				</view>
				<view class="main_item">
					<view class="p">采购企业：</view>
					<view class="b">{{ detail.companyName || ''}}</view>
				</view>
			</view>
		</view>

		<!-- <SupplyDetail
            v-if="pageStu == 1"
            @handleShareStu="handleShareStu"
            :detail="detail"
        />
        <DemandDetail
            v-if="pageStu == 2"
            @handleShareStu="handleShareStu"
            :detail="detail"
        /> -->

		<view class="con">
			<view class="h1">
				{{ pageStu == 1 ? "供应详情" : pageStu == 2 ? "采购详情" : "" }}
			</view>
			<view class="p">
				<view>{{ detail.details }}</view>
				<image v-for="v in detail.imgArr[0]" :key="v" :src="v" alt="" v-show="pageStu == 1">
			</view>
			<view class="img">
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/supplyD.jpg" mode="widthFix" />
			</view>
		</view>
		<view class="btn">
			<view class="btn_item" @click="$handleOpenUrl('/pages/home/index',0)">
				<view class="index"></view>
				<span>首页</span>
			</view>
			<!-- #ifdef !H5 -->
			<button id="shareBtn" class="shareBtn" open-type="share">
				<image class="share" src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg"></image>
				<span>分享</span>
			</button>
			 <!-- #endif -->
			 <!-- #ifdef H5 -->
			 <button id="shareBtn" class="shareBtn" @click="showShare=true">
			 	<image class="share" src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg"></image>
			 	<span>分享</span>
			 </button>
			 <!-- #endif -->
				
			<view class="a"  @click="handlePhone">
				<view class="h2">立即联系</view>
			</view>
		</view>
		<view class="circle_bf" v-if="!userId" @touchmove.stop = "" @click="$handleOpenUrl('/pages/login/index')">
			<view class="con1">
				查看全部
			</view>
		</view>
		<!-- #ifdef H5 -->
		<h5_share :showShare="showShare" @changeShow="changeShow"></h5_share>
		<!-- #endif -->
		<view class="release_modal" @touchmove.prevent v-if="release_modal&&fetche_stu">
			<view class="release_content">
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/deman_modal.png" mode="widthFix"></image>
				<!-- <image v-if="!topStu" src="https://oss-shop.cciinet.com/files/MiniProgram/supply_modal.png" mode="widthFix"></image> -->
				<view class="h1">
					<!-- {{topStu?'没有合适货品？我来帮您':'没有合适买家？我来帮您'}} -->
					货不好卖？找不到合适的货源？
				</view>
				<view class="p">
					<!-- {{topStu?'发布采购需求，让供应商主动报价。':'发布供应需求，让买家主动找你。'}} -->
					直接发布供需，更多用户联系您
				</view>
				<view class="btn_one" @click="handleRelease(10)">发布供应</view>
				<view class="btn_one btn_other" @click="handleRelease(11)">发布采购</view>
			</view>
			<image class="img" @click="handleClose" src="https://oss-shop.cciinet.com/files/MiniProgram/close2.png" mode="widthFix"></image>
		</view>
		<!-- 导航悬浮窗 -->
		<view class="nav_float">
			<view class="float" @click="navStu = !navStu">
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/zhankai.png" mode="widthFix"></image>
				<view class="span">导航</view>
			</view>
			<view class="nav" v-if="navStu">
				<view class="main" @click="$handleOpenUrl('/pages/profile/index',0)">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/wode2.png"  mode="widthFix"></image>
					<view class="span">我的</view>
				</view>
				<view class="main" @click="handlebBlock">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/lahei.png" mode="widthFix"></image>
					<view class="span">拉黑</view>
				</view>
				<view class="main" @click="$handleOpenUrl('/pages/shop/report')">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/jubao.png" mode="widthFix"></image>
					<view class="span">举报</view>
				</view>
				<!-- #ifdef !H5 -->
				<button id="shareBtn" class="main" open-type="share">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg" mode="widthFix"></image>
					<view class="span">分享</view>
				 </button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button id="shareBtn" class="main" @click="showShare=true">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg" mode="widthFix"></image>
					<view class="span">分享</view>
				</button>
				<!-- #endif -->
				<view class="main" @click="$handleOpenUrl('/pages/home/index',0)">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/shouye@2x.png" mode="widthFix"></image>
					<view class="span">首页</view>
				</view>
				<view class="main" @click="navStu = false">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/guanbi.png" style="width: 32upx;" mode="widthFix"></image>
					
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSupplyInfoById,
		addBlackList,
		getValueByTypeCode,
		getCaptcha,
	} from "@/api/shop/index.js";
	import h5_share from '@/components/h5_share.vue'
	export default {
		components: {
			h5_share,
		},
		data() {
			return {
				pageStu: "",
				shareStu: false,
				detail: {},
				option: "",
				current: 0,
				userId:"",
				showShare: false,
				fetche_stu:false,
				release_modal:false,
				time_modal:0,
				timer:"",
				navStu:false,
			};
		},
		onLoad(option) {
			this.pageStu = option.stu;
			this.option = option
			this.getSupplyInfoById();
			this.userId = uni.getStorageSync("userId") ||""
			if(this.pageStu==1) {
				let num = parseInt(uni.getStorageSync("userClickNum") || 0)
				uni.setStorageSync("userClickNum",(num+1))
				if(num>=4){
					if(this.userId) {
						this.timer = setTimeout(()=>{
							this.getValueByTypeCode()
						},3000)
					}
				}
			}else if(this.pageStu==2){
				let num = parseInt(uni.getStorageSync("userClickNum1") || 0)
				uni.setStorageSync("userClickNum1",(num+1))
				if(num>=4){
					if(this.userId) {
						this.timer = setTimeout(()=>{
							this.getValueByTypeCode()
						},3000)
					}
				}
			}
		},
		onShow() {
			this.userId = uni.getStorageSync("userId") || ""
		},
		methods: {
			getValueByTypeCode() {
				getValueByTypeCode({
					code:this.pageStu==1?11:10,
					type:"WAIT_TIME",
					userId:uni.getStorageSync("userId") || ""
				}).then(res=>{
					if(res.code===0) {
						this.time_modal = res.data.value
						this.fetche_stu = true
						this.release_modal = true
					}
				})
			},
			handleClose() {
				this.release_modal = false
			},
			handleRelease(type) {
				this.$handleOpenUrl(type==11?"/pages/shop/add1?release_stu=1":"/pages/shop/add?release_stu=1")
				this.release_modal = false
				saveGuideOperate({
					userId: uni.getStorageSync("userId") || "",
					type: type
				})
			},
			changeShow() {
				this.showShare = false
			},
			onChange(e) {
				this.current = e.detail.current;
			},
			handlePhone() {
				uni.showModal({
				    title: '温馨提示',
				    content: '联系时，请告知是在冻品交易港看到的信息。',
					showCancel:false,
					confirmText:'立即联系',
				    success:  res=>{
				        if (res.confirm) {
							this.handleSendMsg()
						    uni.makePhoneCall({
							    phoneNumber: this.detail.contactsPhone  
						    });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			async handleSendMsg() {
				let res = await getCaptcha({
					userId: this.detail.userId,
					mobile: JSON.parse(uni.getStorageSync('userInfo')).user.mobile || ""
				})
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			handlebBlock() {
				uni.showModal({
				    title: '确定拉黑该用户',
				    content: '拉黑后此用户不能关注你，也无法给你发送任何消息',
				    success:  res=>{
				        if (res.confirm) {
							addBlackList({blackUserId:this.detail.userId,userId:this.userId,status:0}).then(res=>{
								if(res.code===0) {
									uni.showToast({
										icon:"none",
										title:"拉黑成功！"
									})
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									prevPage.$vm.isLoad = 2;
									this.$handleOpenUrl("",2)
								}else{
									uni.showToast({
										icon:"none",
										title:res.msg
									})
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			getSupplyInfoById() {
				getSupplyInfoById({
					id: this.option.id
				}).then((res) => {
					if (res.code === 0) {
						let img = res.data.shopSupplyDemand.productImageList||[]
						const imgArr = [];
						img.map((value, index) => {
							const page = Math.floor(index / 5);
							if (!imgArr[page]) {
								imgArr[page] = [];
							}
							imgArr[page].push(value.source);
						});
						res.data.shopSupplyDemand.imgArr = imgArr;
						this.detail = res.data.shopSupplyDemand;
						console.log(this.detail);
					}
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	.detail {
		width: 100%;
		min-height: 100%;
		background: #f7f9fe;
		padding-bottom: 100upx;
		.head {
			display: flex;
			height: 88upx;
			background: #ffffff;
			align-items: center;
			justify-content: space-between;
			padding-left: 28upx;
			padding-right: 38upx;
			.back {
				width: 18upx;
				height: 34upx;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/fanhui.png") no-repeat;
				background-size: 100% 100%;
			}
			.span {
				font-size: 36upx;
				color: #333333;
			}
			.share {
				width: 36upx;
				height: 36upx;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/share1.svg") no-repeat;;
				background-size: 100% 100%;
			}
		}
		.circle_bf{
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.con1{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				color: #EA5520;
				bottom: 180upx;
				font-size: 36upx;
			}
		}
		.nav_float{
			position: fixed;
			right: 24upx;
			bottom: 156upx;
			z-index: 99;
			.float{
				width: 100upx;
				height: 100upx;
				background: #FEFDFD;
				border: 2upx solid #EEEEEE;
				box-shadow: 0upx 6upx 16upx 0upx rgba(255, 102, 12, 0.2);
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 29upx;
				}
				
				.span{
					font-size: 28upx;
					color: #666666;
				}
			}
			.nav{
				position: fixed;
				right: 142upx;
				bottom: 156upx;
				width: 100upx;
				height: 590upx;
				background: #FEFDFD;
				border: 2upx solid #EEEEEE;
				box-shadow: 0upx 6upx 16upx 0upx rgba(255, 102, 12, 0.2);
				border-radius: 49upx;
				z-index: 9;
				padding-top: 42upx;
				.main{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 24upx;
					image{
						width: 40upx;
					}
					.span{
						font-size: 28upx;
						color: #666666;
					}
				}
			}
		}
		.release_modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		
			.release_content {
				margin-top: -150upx;
				padding: 0 35upx;
				background: #fff;
				height: 860upx;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;
		
				image {
					width: 340upx;
					margin-top: 55upx;
				}
		
				.h1 {
					font-size: 40upx;
					font-weight: bold;
					color: #333333;
					margin-top: 45upx;
					line-height: 1;
				}
		
				.p {
					font-size: 30upx;
					color: #333333;
					margin-top: 37upx;
					line-height: 1;
				}
		
				.btn_one {
					width: 460upx;
					height: 80upx;
					background: #FF5A03;
					border-radius: 45upx;
					margin-top: 70upx;
					font-size: 40upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 80upx;
				}
				.btn_other {
					margin-top: 28upx;
					color: #EA5520;
					border: 1px solid #E8481D;
					background: #fff;
				}
			}
		
			.img {
				width: 34upx;
				margin-top: 36upx;
			}
		}
		.demandDetail {
			.supply_main {
				margin-top: 16upx;
				position: relative;
				z-index: 9;
				border-radius: 8upx;
				margin-left: 30upx;
				margin-right: 30upx;
				z-index: 9;

				.h1 {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					// height: 80upx;
					padding: 30upx 0 24upx 0;
					background: #fff;
					padding-left: 24upx;
					padding-right: 24upx;

					span {
						width: 500upx;
						display: inline-block;
						font-size: 28upx;
						color: #333333;
					}

					.i {
						width: 79upx;
						height: 32upx;
						background: #f0f3ff;
						border-radius: 16upx;
						font-size: 20upx;
						color: #00428e;
						text-align: center;
						display: inline-block;
						line-height: 32upx;
						margin-top: 5upx;
					}

					.active {
						background: #fde7dd;
						color: #ea5520;
					}
				}

				.main_item {
					display: flex;
					padding: 20upx 0;
					align-items: center;
					margin-top: 2upx;
					background: #fff;
					padding-left: 24upx;
					padding-right: 24upx;

					.p {
						font-size: 24upx;
						color: #666666;
					}

					.em {
						font-size: 30upx;
						color: #ff0000;
					}

					.b {
						font-size: 24upx;
						color: #666666;
						font-weight: normal;
					}
				}
			}
		}

		.supplyDetail {
			.img {
				width: 100%;
				height: 563upx;
				position: relative;

				.my-swipe {
					width: 100%;
					height: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.top {
					position: fixed;
					width: 90%;
					top: 24upx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 9999999;
					display: flex;
					justify-content: space-between;

					.back {
						display: inline-block;
						width: 40upx;
						height: 40upx;

						image {
							width: 40upx;
							height: 40upx;
						}
					}

					.share {
						display: inline-block;
						width: 46upx;
						height: 46upx;

						button {
							width: 100%;
							height: 100%;
							background-color: transparent;
							margin: 0;
							padding: 0;
							border: 0;
							box-sizing: border-box;
							font-size: 28px;
							text-align: center;
							text-decoration: none;
							line-height: 1;
							border-radius: 5px;
							-webkit-tap-highlight-color: transparent;
							overflow: hidden;
							cursor: pointer;
						}

						image {
							width: 46upx;
							height: 46upx;
						}
					}
				}
			}

			.custom-indicator {
				position: absolute;
				bottom: 78upx;
				left: 50%;
				transform: translateX(-50%);
				width: 117upx;
				height: 40upx;
				background: #333333;
				opacity: 0.8;
				border-radius: 20upx;
				font-size: 24upx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 24upx;
					height: 24upx;
				}

				.span {
					margin-left: 8upx;
				}
			}

			.supply_main {
				position: relative;
				z-index: 9;
				border-radius: 8upx;
				margin-left: 30upx;
				margin-right: 30upx;
				background: #fff;
				margin-top: -24upx;
				z-index: 9;
				padding-left: 24upx;
				padding-right: 24upx;

				.h1 {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					// height: 80upx;
					padding: 30upx 0 24upx 0;
					background: #fff;
					padding-left: 24upx;
					padding-right: 24upx;

					.span {
						width: 500upx;
						display: inline-block;
						font-size: 28upx;
						color: #333333;
					}

					.i {
						width: 79upx;
						height: 32upx;
						background: #f0f3ff;
						border-radius: 16upx;
						font-size: 20upx;
						color: #00428e;
						text-align: center;
						display: inline-block;
						line-height: 32upx;
						margin-top: 5upx;
					}

					.active {
						background: #fde7dd;
						color: #ea5520;
					}
				}

				.main_item {
					display: flex;
					padding: 20upx 0;
					align-items: center;
					margin-top: 2upx;
					background: #fff;
					padding-left: 24upx;
					padding-right: 24upx;

					.p {
						font-size: 24upx;
						color: #666666;
					}

					.em {
						font-size: 30upx;
						color: #ff0000;
					}

					.b {
						font-size: 24upx;
						color: #666666;
						font-weight: normal;
					}
				}
			}
		}

		.share_wx {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.75);
			overflow: hidden;
			position: fixed;
			z-index: 99;

			image {
				width: 50%;
				position: absolute;
				top: 11upx;
				right: 141upx;
			}
		}

		.con {
			margin-top: 25upx;
			margin-left: 30upx;
			margin-right: 30upx;
			background: #fff;

			.h1 {
				height: 80upx;
				margin-left: 23upx;
				line-height: 80upx;
				font-size: 30upx;
				color: #333333;
				border-radius: 8upx;
			}

			.p {
				margin: 0 15upx;
				height: auto;
				background: #f7f9fe;
				padding: 10upx;

				span {
					display: block;
				}

				image {
					max-width: 100%;
				}
			}

			.img {
				width: 100%;
				padding-left: 7upx;
				padding-right: 7upx;
				margin-top: 27upx;

				image {
					width: 100%;
				}
			}
		}

		.btn {
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 98upx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 999;
			.a {
				margin-right: 20upx;
			}
			.btn_item,.shareBtn {
				display: flex;
				width: 161upx;
				height: 65upx;
				background: #ffffff;
				border: 1upx solid #eeeeee;
				border-radius: 32upx;
				align-items: center;
				justify-content: center;
				margin-left: 28upx;
				font-size: 32upx;
				.index {
					display: inline-block;
					width: 38upx;
					height: 38upx;
					background: url("https://oss-shop.cciinet.com/files/MiniProgram/shouye@2x.png") no-repeat;
					background-size: 100% 100%;
				}
				.index1 {
					display: inline-block;
					width: 38upx;
					height: 38upx;
					background: url("https://oss-shop.cciinet.com/files/MiniProgram/waring1.png") no-repeat;
					background-size: 100% 100%;
				}
				.span {
					color: #666666;
					margin-left: 13upx;
				}

				.share {
					width: 38upx;
					height: 38upx;
				}
			}

			.h2 {
				width: 283upx;
				height: 64upx;
				background: linear-gradient(-13deg, #218eed, #035abe);
				border-radius: 32upx;
				font-size: 32upx;
				color: #ffffff;
				text-align: center;
				line-height: 64upx;
				margin-left: 65upx;
			}
		}
	}
</style>
